<template>
  <section class="list-diary">
    <div class="inner">
      <Row class="top-grid">
        <Col span="6" class="grid-item">
          <img src="./img/base.png" alt="">
          <p>基础信息设置</p>
        </Col>
        <Col span="6" class="grid-item">
          <img src="./img/msg.png" alt="">
          <p>系统消息(<span class="pink">88</span>)</p>

        </Col>
        <Col span="6" class="grid-item">
          <img src="./img/common.png" alt="">
          <p>评论管理(<span class="pink">88</span>)</p>

        </Col>
        <Col span="6" class="grid-item">
          <img src="./img/auther.png" alt="">
          <p>认证管理</p>
        </Col>
      </Row>
      <p class="info">
        您在圈子广场页面所做的热点信息推动即将到期，请尽快续费！【查看内容】
        <span class="pink float-right">立即续费</span>
      </p>
      <p class="info">
        <span class="pink">系统推荐：</span>会员欣欣公主QC近期多次浏览了平台内的双眼皮项目，请多关注！
        <span class="pink float-right">等多>></span>
      </p>
      <Row class="top-grid">
        <Col span="6" class="grid-item">
          <img src="./img/yuyue.png" alt="">
          <p>未处理的预约</p>
          <p style="margin-top: 0">(<span class="pink">88</span>)</p>
        </Col>
        <Col span="6" class="grid-item">
          <img src="./img/unwatch.png" alt="">
           <p>未查看的评论</p>
          <p style="margin-top: 0">(<span class="pink">88</span>)</p>
        </Col>
        <Col span="6" class="grid-item">
          <img src="./img/unwatchleft.png" alt="">
          <p>未查看的留言</p>
          <p style="margin-top: 0">(<span class="pink">88</span>)</p>
        </Col>
        <Col span="6" class="grid-item">
          <img src="./img/unfinishtask.png" alt="">
          <p>未完成的任务</p>
          <p style="margin-top: 0">(<span class="pink">88</span>)</p>
        </Col>
      </Row>
      <div class="total-count">
        <Row>
          <Col span="8">
            主页累计被浏览：<span class="pink">26688</span>
          </Col>
          <Col span="8">
            主页被关注：<span class="pink">2668</span>
          </Col>
          <Col span="8">
            项目预约：<span class="pink">6688</span>
          </Col>
          <Col span="8">
            广告点击浏览：<span class="pink">26688</span>
          </Col>
          <Col span="8">
            推广点击浏览：<span class="pink">2668</span>
          </Col>
          <Col span="8">
            圈子被关注：<span class="pink">26688</span>
          </Col>
          <Col span="8">
            圈子累计会员：<span class="pink">26688</span>
          </Col>
          <Col span="8">
            新增圈子会员：<span class="pink">26</span>
          </Col>
          <Col span="8">
            日记被投诉：<span class="pink">0</span>
          </Col>
        </Row>
      </div>
      <simple-title :title="'下列用户今日浏览了您所发布的项目'" :show="false"></simple-title>
      <div class="member-container">
        <Row>
          <Col span="8" v-for="i in list" :key="i.id">
            <user-simple :data="i"></user-simple>
          </Col>
        </Row>
      </div>
      <simple-title :title="'下列用户今日浏览了您所发布的日记'" :show="false"></simple-title>
      <div class="member-container">
        <Row>
          <Col span="8" v-for="i in list" :key="i.id">
            <user-simple :data="i"></user-simple>
          </Col>
        </Row>
      </div>
      <simple-title :title="'下列用户今日给您发布了评论/留言'" :show="false"></simple-title>
      <div class="member-container">
        <Row>
          <Col span="8" v-for="i in list" :key="i.id">
            <user-simple :data="i"></user-simple>
          </Col>
        </Row>
      </div>
    </div>
  </section>
</template>

<script>
import SimpleTitle from '@/components/Title/SimpleTitle'
import UserSimple from '@/components/ListItem/UserSimple'
export default {
  name: 'DiaryHome',
  components: {
      SimpleTitle,
      UserSimple
  },
   data () {
      return {
          list: [
              {id: 1,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 2,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 3,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 4,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 6,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 7,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 8,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
              {id: 9,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg', name: '安娜', location: '江苏省徐州市', level: 1},
          ]
      }
   },
    created () {
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .list-diary {
    border: 1px solid @border-color;
    padding: 15px;
    .top-grid {
      text-align: center;
      padding-top: 18px;
      padding-bottom: 30px;
      border-bottom: 1px solid @border-color;
    }
    .info {
      height: 60px;
      line-height: 60px;
      color: #666;
      font-size: 14px;
      border-bottom: 1px solid @border-color;
    }
    .grid-item {
      border-right: 1px solid @border-color;
      &:last-child {
        border-right: 0;
      }
      img{
        width: 38px;
        height: 38px;
      }
      p {
        font-size: 14px;
        color: #666;
        margin-top: 12px;
      }
    }
    .member-container {
      margin-top: 20px;
    }
    .total-count {
      padding: 15px;
      font-size: 14px;
      color: #666;
      span{
        font-weight: bold;
        display: inline-block;
        height: 45px;
        line-height: 45px;
      }
    }
  }
</style>
